import React, { Component } from 'react';
import context from '../../utils/context'
import logo from '../../assets/logo192.png'
class Myheader extends Component {
    constructor(props){
        super(props);
        this.state = {
        currentIndex:0,
        kindlist:[],
         list:[
                {pic:logo,name:'化妆品',price:'原价￥309',buyprice:'￥195',sale:1220},
                {pic:logo,name:'化妆品',price:'原价￥309',buyprice:'￥195',sale:12},
                {pic:logo,name:'化妆品',price:'原价￥309',buyprice:'￥195',sale:123},
                {pic:logo,name:'化妆品',price:'原价￥309',buyprice:'￥195',sale:1234},
                {pic:logo,name:'化妆品',price:'原价￥309',buyprice:'￥195',sale:12345},
                {pic:logo,name:'化妆品',price:'原价￥309',buyprice:'￥195',sale:1211},
            ]
    }
    }
    
    handleClick(index){
        context.emit('saveIndex',index)
        context.emit('change',index)
        this.setState({
            currentIndex:index,
           
            
        })
    }
     
       
    
    render() {
        return (
            <div className='goodsheader'>
                <div className='title'>
                    <h1>全部商品</h1>
                </div>
               <div className='input'>
               <input type="text" placeholder='搜索店铺内商品' />
               </div>
                <div className='kindlist'>
                {
                    this.props.kindlist.map((item,index)=>{
                        return (
                          
                            <div className='kind' key={index}>
                                <div className={'name '  + (this.state.currentIndex === index ? 'active': '')}
                               
                                onClick={()=>{this.handleClick(index)}}
                                >{item.name}</div>
                            </div>
                           
                        )
                    })
                }
                </div>

            </div>
        );
    }
}

export default Myheader;